<template>
       <div ref="chartContainer2" style="width: 700px; height: 400px;margin: 10px auto;"></div>
</template>

<script>
import * as echarts from 'echarts';
import {fivesalesvolumel} from "../api/echarts";

export default {
  name: "echarts2",
  data() {
    return {
      lData: []
    };
  },
  mounted() {
    this.getFiveSalesVolume_l();
  },
  methods: {
    renderChart2() {
      const chartContainer = this.$refs.chartContainer2;
      const chart = echarts.init(chartContainer);

      const options = {
        title: {
          text: '前5销量',
        },
        tooltip: {},
        legend: {
          data:['销量']
        },
        xAxis: {
          data: [this.lData[0].title, this.lData[1].title, this.lData[2].title, this.lData[3].title, this.lData[4].title],
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [this.lData[0].count, this.lData[1].count, this.lData[2].count, this.lData[3].count, this.lData[4].count],
            itemStyle: {
              color: 'green', // 设置柱状图的颜色为绿色
            },
          },
        ],
      };

      chart.setOption(options);
    },
    getFiveSalesVolume_l() {
      fivesalesvolumel().then((res) => {
        console.log(res)
        if (res.flag == true) {
          this.lData = res.data;
          this.renderChart2();
        } else {
          // alert(res.data.data);
        }
      });
    },
  },
};
</script>


<style scoped>

</style>